import Observer from "./Observer.js"

export default class Vue{
    constructor(obj){

        // 1、数据挂载：把data的所有键值对挂载在vue对象本身上。
        for(let key in obj.data){
            // 订阅
            let o1 = new Observer();
            // 1)、查找哪些dom元素使用 key。
            let rootDom = document.querySelector(obj.el);
            for(let i=0;i<rootDom.children.length;i++){
                if(rootDom.children[i].innerHTML.includes("{{"+key+"}}")){
                    let sourceHtmlStr = rootDom.children[i].innerHTML;
                    o1.addSubscriber(function(val){
                        rootDom.children[i].innerHTML = sourceHtmlStr.replace(new RegExp("{{"+key+"}}","g"),val);
                    });
                }
            }

            let value = obj.data[key];
            // this[key] = obj.data[key];
            // 拥有setter和getter方法的属性叫做访问器属性，这些属性不能存储数据
            Object.defineProperty(this,key,{
                set:function(val){
                    console.log(key+"的值被改了："+val);
                    value = val;
                    o1.publish(val);
                },
                get:function(){
                    return value;
                }
            });
        
   
        }

        // 2、渲染模板：把数据显示在html上。
        let rootDom = document.querySelector(obj.el);
        let htmlStr = rootDom.innerHTML;
        for(let key in obj.data){
            // htmlStr = htmlStr.replace(/{{msg}}/g,obj.data.msg);            
            htmlStr = htmlStr.replace(new RegExp("{{"+key+"}}","g"),obj.data[key]);
        }
        rootDom.innerHTML = htmlStr;

    }

    render(){

    }

}